<template>
	<div class='information_container'>
		<div class='title'>编辑信息</div>
		<div class='home_aside_information'>
			<div class='edit_password'>
				<div class='home_aside_information_item'>
					<span>姓名</span>：
					<span id="">{{userData.name||''}}</span>
				</div>
				<!-- <div class='edit_password_btn'> -->
				<a-button type="primary" @click='()=>editPasswordOpen=true' style='margin-left:40px;'>修改密码</a-button>
				<!-- </div> -->
			</div>
			<template v-if='!isTeacher()'>
				<div class='home_aside_information_item'>
					<span>学号</span>：
					<span id="">{{userData.num||''}}</span>
				</div>
				<div class='home_aside_information_item'>
					<span>年级</span>：
					<span id="">{{userData.gradeName||''}}</span>
				</div>
				<div class='home_aside_information_item'>
					<span>班级</span>：
					<span v-if="userData && userData.gradeClasses && userData.gradeClasses.length > 0">
						{{ userData.gradeClasses[0].name || '暂无班级' }}
					</span>
					<span v-else>暂无班级</span>
				</div>
				<div class='home_aside_information_item'>
					<span>专业方向</span>：
					<span v-if="userData && userData.gradeClasses && userData.gradeClasses.length > 0">
						{{ userData.gradeClasses[0].professionalDirection || '暂无专业方向' }}
					</span>
					<span v-else>暂无专业方向</span>
				</div>
			</template>

			<template v-if='isTeacher()'>
				<div class='home_aside_information_item'>
					<span>手机号</span>：
					<span id="">{{userData.mobile||''}}</span>
				</div>
			</template>

		</div>
		
		<template v-if='!isTeacher()'>
			<div class='editItem'>
				<div class='editItem_label'>邮箱：</div>
				<a-input v-model:value="userData.email" placeholder="请输入邮箱" style='max-width: 400px;' />
			</div>
			<div class='editItem'>
				<div class='editItem_label'>手机号：</div>
				<a-input v-model:value="userData.mobile" placeholder="请输入手机号" style='max-width: 400px;' />
			</div>
			<div class='editItem'>
				<div class='editItem_label'>QQ号：</div>
				<a-input v-model:value="userData.qq" placeholder="请输入QQ号" style='max-width: 400px;' />
			</div>
			<div class='editItem'>
				<div class='editItem_label'>自我介绍：</div>
				<a-textarea v-model:value="userData.introduceYourself" placeholder="请输入自我介绍" :rows="4"
					style='max-width: 400px;' />
			</div>
		</template>
		
		<template v-if='isTeacher()'>
		
			<div class='editItem'>
				<div class='editItem_label'>方向：</div>
				<a-input v-model:value="userData.orientation" placeholder="请输入方向" style='max-width: 400px;' />
			</div>
			<div class='editItem'>
				<div class='editItem_label'>自我介绍：</div>
				<a-textarea v-model:value="userData.introduceYourself" placeholder="请输入自我介绍" :rows="4"
					style='max-width: 400px;' />
			</div>
		</template>

		<div class='btnBox'>
			<!-- <a-button @click='toHome'>返回首页</a-button> -->
			<a-button @click='cancel'>取消</a-button>
			<a-button type="primary" @click='save'>保存</a-button>
			<a-button @click='toHome'>返回首页</a-button>
		</div>

		<a-modal v-model:open="editPasswordOpen" title="修改密码" @cancel='clear' @ok='submit'>
			<a-form :model="formState" name="normal_login" class="login-form" :rules='rules' ref="formRef"
				@submit="submit">
				<a-form-item has-feedback name="oldPassword">
					<a-input-password v-model:value="formState.oldPassword" type="password" placeholder="请输入旧密码" />
				</a-form-item>
				<a-form-item has-feedback name="newPassword">
					<a-input-password v-model:value="formState.newPassword" type="password" autocomplete="off"
						placeholder="请输入新密码" />
				</a-form-item>
				<a-form-item has-feedback name="verifyPassword">
					<a-input-password v-model:value="formState.verifyPassword" type="password" autocomplete="off"
						placeholder="请再次输入新密码" />
				</a-form-item>
				<!-- <a-form-item class='button-box' style='display: flex;align-items: center;justify-content: flex-end;'>
					<a-button @click='()=>{clear();editPasswordOpen=false}' class="login-form-button"
						style='margin-right:20px'>
						取消
					</a-button>
					<a-button type="primary" html-type="submit" class="login-form-button">
						修改密码
					</a-button>

				</a-form-item> -->
			</a-form>
		</a-modal>

		<!-- 		<a-modal v-model:open="modal.visible" :title="modal.name" :footer="null">
			<a-form ref="formRef" :disabled="modal.formDisable" :model="formModel" :rules="rules" v-bind="layout"
				:label-col="{ style: { width: '100px' } }" @validate="handleValidate">
				<a-form-item has-feedback label="姓名" name="name">
					<a-input v-model:value="formModel.name" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback label="手机号" name="mobile">
					<a-input v-model:value="formModel.mobile" autocomplete="off" disabled />
				</a-form-item>
				<a-form-item has-feedback label="专业方向" name="orientation">
					<a-input v-model:value="formModel.orientation" autocomplete="off" />
				</a-form-item>
				<a-form-item has-feedback label="自我介绍" name="introduceYourself">
					<a-textarea v-model:value="formModel.introduceYourself" />
				</a-form-item>
				<a-form-item has-feedback label="上传头像" name="avatar">
					<minImage :disabled="modal.formDisable" v-model="formModel.avatar"
						v-model:previewImage="formModel.avatarUrl" :maxSize="2"
						:customUploadImage="customUploadImage" />
				</a-form-item>

				<a-form-item v-if="!modal.formDisable" :wrapper-col="{ offset: 17 }" style="white-space:nowrap;">
					<a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
					<a-button style="margin-left: 10px" @click="modal.visible = false">取消</a-button>
				</a-form-item>
			</a-form>
		</a-modal> -->
	</div>

</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		modifyStudentInformation,
		getStudentInformation,
		getTeacherInformation,
		modifyTeacherInformation
	} from '@/request/personalCenter.js'
	import {
		state
	} from '@/stores/info.js'
	import {
		message
	} from 'ant-design-vue';
	import {
		modifyPassword
	} from '@/request/login.js'
	import {
		isTeacher
	} from "@/stores/info"
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
function toHome(){
	router.push({name: 'PersonalCenter'})
}

	onMounted(async () => {
		 console.log('Personal Information Component Mounted');
		await getStudentMessage()
	})
	//修改密码
	let editPasswordOpen = ref(false)
	const formState = reactive({
		oldPassword: '',
		newPassword: '',
		verifyPassword: '',
	});
	//清空
	function clear() {
		for (let key in formState) {
			formState[key] = ''
		}
		editPasswordOpen.value = false
	}

	//点击修改密码按钮
	async function submit() {
		let data = {}
		let res = await modifyPassword(formState)
		console.log('修改密码', res)
		if (res && res.code && res.code == 200) {
			message.success(res.data ? res.data.message : '密码修改成功');
			clear()
			// editPasswordOpen.value = false
		} else {
			message.error(res.data ? res.data.message : '密码修改失败，请重试');
			clear()
			// editPasswordOpen.value = false
		}
	}

	//两次密码校验
	const validatePass = async (_rule, value) => {
		if (value === '') {
			return Promise.reject('请输入密码');
		} else if (value.length < 6 || value.length > 16) {
			return Promise.reject('密码长度必须在6-16位之间');
		}
		// else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(value)) {
		//   return Promise.reject('密码必须包含数字和字母');
		// }
		else {
			return Promise.resolve();
		}
	};
	const validatePass2 = async (_rule, value) => {
		if (value === '') {
			return Promise.reject('请再次输入密码');
		} else if (value !== formState.newPassword) {
			return Promise.reject("两次密码不匹配!");
		} else if (value.length < 6 || value.length > 16) {
			return Promise.reject('密码长度必须在6-16位之间');
		}
		// else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(value)) {
		//   return Promise.reject('密码必须包含数字和字母');
		// }
		else {
			return Promise.resolve();
		}
	};
	const rules = {
		oldPassword: [{
			required: true,
			trigger: 'change',
			validator: validatePass,
			message: '请输入旧密码',
		}],
		newPassword: [{
			required: true,
			validator: validatePass,
			trigger: 'change',
			message: '请输入新密码',
		}],
		verifyPassword: [{
			required: true,
			validator: validatePass2,
			trigger: 'change',
			message: '请重新输入密码',
		}],
	};


	//修改基本信息
	let userData = reactive(state.userInfo)
	let userData2 = reactive({})
	async function getStudentMessage() {
		let res
		if(isTeacher()){
			res = await getTeacherInformation()
		}else{
			res = await getStudentInformation()
		}
		console.log('基本信息',res)
		if (res&&res.code == 200) {
			for (let key in res.data) {
				userData[key] = res.data[key] ? res.data[key] : ''
				userData2[key] = res.data[key] ? res.data[key] : ''
			}
			console.log('userData', userData)
		}
	}

	function cancel() {
		console.log('userData2', userData2)
		for (let key in userData2) {
			userData[key] = userData2[key]
		}
	}
	async function save() {
		let formData = new FormData()

		let data = {
			email: userData.email,
			mobile: userData.mobile,
			qq: userData.qq,
			introduceYourself: userData.introduceYourself
		}
		for (let key in data) {
			formData.append(key, data[key])
		}
		console.log('修改的数据', data)
		let res = await modifyStudentInformation(formData);
		if (res&&res.code == 200) {
			message.success('信息修改成功')
			await getStudentMessage()
		}
		console.log('修改', res)

	}
</script>

<style lang='scss' scoped>
	@import '@/styles/public.scss';
	$informationContainerPaddingTop:20px;
	$informationContainerPaddingLeft:30px;

	.information_container {
		height: calc(100% - #{$foundationContentPadding} * 2);
		/* width: calc(100% - #{$foundationContentPadding} * 2); */
		width: $viewMinWidth;
		margin: $foundationContentPadding;
		background-color: white;
		border-radius: 10px;
		position: relative;
		padding: $informationContainerPaddingTop $informationContainerPaddingLeft;

		.title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.home_aside_information {
			width: 100%;
			margin-bottom: 10px;
			/* padding-bottom:42px; */
			/* height: 100%; */

			.edit_password {
				display: flex;
				align-items: baseline;
			}

			.home_aside_information_item {
				/* width: 70%; */
				/* display: flex;
				align-items: center; */
				height: 28px;
				margin: 10px 0 0 0;
				min-width: 100px;
				line-height: 28px;
			}
		}

		.editItem {
			display: flex;
			/* flex-direction: column; */
			align-items: center;
			margin-bottom: 10px;

			.editItem_label {
				width: 80px;
				display: flex;
				align-items: center;
			}
		}

		.editItem:nth-last-child(1) {
			margin-bottom: 0px;
		}

		.btnBox {
			width: 240px;
			margin: 0 $informationContainerPaddingLeft $informationContainerPaddingTop 0;
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
